<template>

    <div id="post-list">


    <div id="post-list-tiltle">
        <div class="text">宠物之家论坛</div>
        <div class="q"></div>
        <div class="q2"></div>
        <div class="q3"></div>
    </div>

    <div id="post-list-item">
        <div style="display: flex;height: 40px;">
<!--            <el-icon><Top /></el-icon> <el-icon><Bottom /></el-icon><el-icon><SortUp /></el-icon><el-icon><SortDown /></el-icon>-->

<!--        一键排列-->


            <div class="search" style="position: relative;left: 400px;top: 4px">
                <el-input
                        v-model="postInput"
                        style="width: 240px"
                        placeholder="请输入内容"
                />
                <button @click="searchPostList"><el-icon><Search /></el-icon></button>
            </div>
            <div style="position: absolute;right: 455px;top: 83px;"><button  @click="writePost" style="color:blue;font-size: 18px">发布文章</button> </div>
        </div>

<!--文章内容-->
    <div class="item"  v-for="item in postStore.postList">
    <div style="width:70%;font-size: 16px">
        <div style="margin: 10px 10px" @click="getPostInfo(item.postId)">
            标题:
            <span style="
            font-size: 20px;cursor: pointer;"
            >{{item.postTitle}}</span>

        </div>
        <div
        style="margin:10px;"
        >作者：{{item.customer.customerName}}</div>
    </div>

        <div style="margin: auto">
        <div
                style="margin: 10px 0"
        >发布时间：{{item.postCreateAt}}</div>
        <div
                style="background-color: #67C23A;text-align: center;display: flex;height: 25px"
        >

            <div style="">
                <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="浏览量"
                        placement="top"
                >
                    <el-icon  size="20px" style="margin:2.5px"><Reading /></el-icon>
                </el-tooltip>
            </div>

            <div style="width :40px;line-height: 25px">{{item.postReadCount}}</div>


            <div style="">
                <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="收藏量"
                        placement="top"
                >
                    <el-icon  size="20px" style="margin:2.5px"><StarFilled /></el-icon>
                </el-tooltip>
            </div>
            <div style="width :40px;line-height: 25px">{{item.postLikeCount}}</div>

        </div>
    </div>
    </div>
    </div>

        <!-- 添加或修改帖子管理对话框 -->
        <el-dialog :title="title" v-model="open3" width="100%" append-to-body>
            <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
<!--                <el-form-item label="顾客id" prop="postCustomerId">-->
<!--                    <el-input v-model="form.postCustomerId" placeholder="请输入顾客id" />-->
<!--                </el-form-item>-->
                <el-form-item label="标题" prop="postTitle">
                    <el-input v-model="form.postTitle" placeholder="请输入标题" />
                </el-form-item>
                <el-form-item label="照片" prop="postImages">
                    <image-upload v-model="form.postImages"/>
                </el-form-item>
                <el-form-item label="内容">
                    <editor v-model="form.postContent" :min-height="192"/>
<!--       todo 发布文章后 下次发布文章时  文章的内容不为空             <el-input v-model="form.postContent"></el-input>-->
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>

    <div><br/></div>
    <br/> <br/>

</template>

<script setup lang="ts">
    import usePostStore from "@/store/modules/post";
    import { ref,reactive ,toRefs} from "vue";
    import { getCurrentInstance } from "vue";
    import {getCustomerId} from "@/utils/auth.js";
    import {useRouter} from "vue-router";
    const { proxy } = getCurrentInstance();

    const postStore = usePostStore()
    postStore.getPostList()


    const postInput = ref("")
//todo搜索文章 ======================================================
    const searchPostList =()=>{
        // console.log(typeof postInput.value)
        // console.log(postInput.value+"|====================")
        //判断空格
        if(postInput.value===""){
            postStore.searchPost2(" ").then((res:any)=>{
                postInput.value = ""
                console.log("success")
            })
        }else{
            postStore.searchPost2(postInput.value).then((res:any)=>{
                postInput.value = ""
                console.log("success")
            })
        }





    }

    //编写文章功能==================================================
    const open3 = ref(false)
    const title = ref("编写文章");
   const  writePost = () =>{
       console.log("编写")
       reset();
        open3.value = true
       console.log(form.value)
   }
    const data = reactive({
        form: {},
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            postId: null,
            postCustomerId: null,
            postTitle: null,
            postContent: null,
        },
        rules: {
        }
    });
    const { queryParams, form, rules } = toRefs(data);
    // 取消按钮
    function cancel() {
        open3.value = false;
        reset();

    }
    // 表单重置
    function reset() {
        form.value = {
            postId: null,
            postCustomerId: null,
            postTitle: null,
            postImages: null,
            postContent: null,
            postReadCount: null,
            postLikeCount: null,
            postCreateAt: null
        };
        proxy.resetForm("postRef");
    }
    /** 提交按钮 */
    function submitForm() {
        proxy.$refs["postRef"].validate((valid: any) => {
            if (valid) {
                    console.log("add")
                    form.value.postCustomerId = Number(getCustomerId());
                    console.log(form.value)
                    postStore.addPost(form.value)
                     cancel()
                    console.log(form.value)
                }
        });
    }


    //===========================================获取详情文章
    const router = useRouter();
    const getPostInfo = (postId:number)=>{
        console.log(postId)
        router.push("/postInfo/"+postId)
    }

    // const myPromise = new Promise((resolve, reject) => {
    //     // 模拟一个异步操作，比如从服务器获取数据或进行文件读取等
    //     setTimeout(() => {
    //         const randomNumber = Math.random();
    //         if (randomNumber > 0.5) {
    //             resolve('异步操作成功，结果是：' + randomNumber);
    //         } else {
    //             reject('异步操作失败，原因是随机数小于 0.5，随机数为：' + randomNumber);
    //         }
    //     }, 2000);
    // });
    //
    // myPromise.then(result => {
    //     console.log(result);
    // }).catch(error => {
    //     console.error(error);
    // });
</script>

<style scoped>

    #post-list{
        width:100%;
        height:100%;
        background-image: url("../../../assets/images/luntan3.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

    #post-list-tiltle{
        height: 80px;
        /*background-color: #98b99b;*/
        display: flex;
        width:80%;
        margin: 0 10%;
    }
    .text{
        font-size: 40px;
        margin: 15px 5px 10px 20px;
    }
    #post-list-tiltle .search{
        /*background-color: red;*/
        margin-left: 200px;
        width:50%
    }
    #post-list-tiltle .search input {
        border: 2px solid #7BA7AB;
        border-radius: 5px;
        /*background: #F9F0DA;*/
        color: #9E9C9C;
        box-sizing: border-box;
        width: 80%;
    }


    /*文章内容      ============================*/
    #post-list-item{
        /*height: 500px;*/

        width: 80%;
        margin: auto;
    }



    #post-list-item .item{
        width:90%;
        margin: auto;
        margin-top: 10px;
        display: flex;
        background-color: #b4bccc;
        opacity: 0.7; /* 设置透明度为 0.5，值在 0（完全透明）到 1（完全不透明）之间 */
    }













    .q{
        background-image: url("../../../assets/images/heart3.png");
        background-size: cover;
        width: 50px;
        height: 50px;
        position: fixed;
        top: 50%;
        /*background-image: url("..");*/

        /*background-image: url("https://img-home.csdnimg.cn/images/20201124032511.png");*/
        /*background-size: 100% 100%;*/

        animation: scaleEffect 5s linear infinite;
        /*animation: move 5s linear infinite;*/
    }
    @keyframes move{

        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    @keyframes scaleEffect {
        0% {
            transform: scale(1);
        }
        10% {
            transform: scale(1.5);
        }
        20% {
               transform: scale(1);
           }
        30% {
            transform: scale(1.5);
        }
        40% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.5);
        }
        60% {
            transform: scale(1);
        }
        70% {
            transform: scale(1.5);
        }
        80% {
            transform: scale(1);
        }
        90% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }

    .q2{
        background-image: url("../../../assets/images/heart3.png");
        background-size: cover;
        width: 50px;
        height: 50px;
        position: fixed;
        top: 30%;
        right:10%;
        /*background-image: url("..");*/

        /*background-image: url("https://img-home.csdnimg.cn/images/20201124032511.png");*/
        /*background-size: 100% 100%;*/

        animation: scaleEffect 5s linear infinite;
        /*animation: move 5s linear infinite;*/
    }
</style>
